<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="themeColor='red'">红色</button>
   <button @click="themeColor='blue'">蓝色</button>
   <button @click="themeColor='orange'">橘黄色</button>
    ---------
    <LevelOne />
  </div>
</template>
<script>
import LevelOne from '../components/LevelOne.vue'
// 1. 按需导入 provide
import { provide,ref } from 'vue'
export default {
 name: 'app',
 setup() {
   // 2. App 根组件作为父级组件，通过 provide 函数向子级组件共享数据（不限层级）
   //    provide('要共享的数据名称', 被共享的数据)
   const themeColor = ref('red')
   provide('globalColor1', themeColor)
   provide('globalColor2', 'red')
   return {
     themeColor
   }
 },
 components: {
   LevelOne
 }
}
</script>